<template>
  <div id="app">
    <header>
      <div class="header-item date" :style="progress">
        <span>W{{week}} </span> &nbsp; <span>D{{day}}</span>
      </div>
      <div class="header-item money">
        {{money}}
      </div>
    </header>
    <main>
      <div style="min-height: 13rem">
        <div class="cook-area">
          <div v-for="cook in cookList" class="cooker" :key="cook.id">
            <div v-show="cook.state==='free' && canFire === true"  style="background-color: #006dd9">
              <div class="close" @click="fireing(cook.id)">
                <div class="redC"></div>
                <div class="redR"></div>
              </div>
            </div>
            <div :class="cook.state" class="people cook" @click="speedUpCooking(cook)">
              <img class="people-icon" style="width: 100%" src="./assets/images/iconfinder_Chef-2_379358.png" alt=""/>
            </div>
            <div v-if="cook.state!=='free'" class="label" :style="calculateCookerStyle(cook)">
              {{cook.food}}
            </div>
            <div v-show="cook.state==='complete'">
              <img class="complete-icon" src="./assets/images/iconfinder_Food-Dome_379366.png" alt="">
            </div>
          </div>
          <div v-if="canEmploy" class="cooker">
            <div class="people cookadd free" @click="employing">
              <img style="width: 100%;filter: grayscale(100%) brightness(500%);" class="people-icon"
                   src="./assets/images/iconfinder_Chef-2_379358.png" alt=""/>
              <div class="redC"></div>
              <div class="redR"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="customer-area">
        <div v-if="showPrompt" @click="cancelShowPrompt" class="prompt" :class="prompt.type">{{prompt.content}}</div>
        <div class="customer" v-for="cus in customerList" :key="cus.id">
          <div class="people cus" :class="cus.state">
            <img class="people-icon" style="width: 100%" :src="cus.avatar"/>
          </div>
          <ul class="food-list">
            <li v-for="food in cus.foodList" :key="food.id">
              <span :style="calculateCusFoodStyle(food)">{{food.name}}</span>
              <div v-if="food.state==='completed' " class="food-cpd-icon" :style="calculateCusFoodStyle(food)"
                   @click="eatFood(cus,food)">
                <img src="./assets/images/iconfinder_Food-Dome_379366.png" alt="">
              </div>
            </li>
          </ul>
          <div v-if="cus.state==='appease'" @click="appeaseCus(cus.id)">
            <img class="appease-icon" src="./assets/images/iconfinder_Instagram_UI-07_2315589.png" alt="">
          </div>
          <div v-if="cus.state==='pay'" @click="payCus(cus.id)">
            <img class="pay-icon" src="./assets/images/iconfinder_Euro-Coin_379523.png" alt="">
          </div>
        </div>
      </div>
      <div class="waiting-area">
        <div class="wait">
          <div class="waiter" v-for="wt in waitingList" :key="wt.id">
            <div class="people" :class="wt.state" @click="ordering">
              <img class="people-icon" style="width: 100%;"
                   :src="wt.avatar" alt=""/>
              <div class="label" :style="calculateWaitStyle(wt)">
                等位中
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <Menu></Menu>
    <welcome></welcome>
    <Employ></Employ>
    <Fire></Fire>
    <img ref="conf0" :src="backgroundImage" style="position:absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: -1" alt="" >
  </div>
</template>

<script>
import Welcome from "./components/guides/Welcome";
import Menu from "./components/guides/Menu";
import Employ from "./components/guides/Employ";
import Fire from "./components/guides/Fire";
import {mapState} from 'vuex'
import {mapMutations} from 'vuex'

export default {
  components: {Welcome, Menu, Employ, Fire},
  data() {
    return {
      backgroundImage: require('/public/dose-juice-sTPy-oeA3h0-unsplash.jpg'),
      stateList: ['free', 'ordering', 'sitting', 'eating', 'appease', 'pay'],
      backColorMap: {
        free: 'background: linear-gradient(to right, #dddddd 50%, #aaaaaa 50%);',
        appease: 'background: linear-gradient(to right, #661a00 50%, #401000 50%);',
        safe: 'background:  #00b200;',
        warning: 'background: linear-gradient(to right,#ff9122 50%,#d96d00  50%);',
        danger: 'background: linear-gradient(to right,#ff2020 50%, #b20000 50%);',
        destroy: 'background-color: #535362;text-decoration: line-through;'
      },
    }
  },
  computed: {
    ...mapState([
      'hour',
      'minute',
      'day',
      'week',
      'money',
      'showPrompt',
      'prompt',
      'cookList',
      'canFire',
      'canEmploy',
      'waitingList',
      'customerList',
      'cookerCnt'
    ]),
    progress(){
      let pro = (this.hour*30+this.minute)/180*100
      return 'background: linear-gradient(to right, #ffd24d '+pro+'%, #ffe699 '+pro+'%);'
    }
  },
  methods: {
    ...mapMutations([
      'employing',
      'fireing',
      'ordering',
      'appeaseCus',
      'payCus',
      'patienceTimer',
      'prompting',
      'cancelShowPrompt'
    ]),
    // 计算厨师进度条
    calculateCookerStyle(people) {
      if (people.state === 'complete') {
        return 'background-color: #ac91ff'
      } else if (people.state === 'working') {
        return 'background: linear-gradient(to right, #d96d00 ' + people.progress + '%, #ff9122 ' + (people.progress) + '%);'
      } else if (people.state === 'speeding') {
        return 'background: linear-gradient(to right, #b20000 ' + people.progress + '%, #ff2020 ' + (people.progress) + '%);'
      }
    },
    // 计算顾客耐心值
    calculateWaitStyle(wt) {
      return 'background: linear-gradient(to right, #006dd9 ' + (100 - wt.patience) + '%, #2693ff ' + (100 - wt.patience) + '%);'
    },
    // 计算顾客对食物的耐心值
    calculateCusFoodStyle(food) {
      if (food.state === 'eatup') {
        return this.backColorMap.safe
      }
      if (food.state === 'eating') {
        return 'background: linear-gradient(to right,  #d96d00 ' + (100 - food.patience) + '%, #ff9122 ' + (100 - food.patience) + '%);'
      }
      if (food.state === 'doing' || food.state === 'waiting' || food.state === 'completed') {
        return 'background: linear-gradient(to right, #b20000 ' + (100 - food.patience) + '%, #ff2020 ' + (100 - food.patience) + '%);'
      }
      if (food.state === 'destroy') {
        return this.backColorMap.destroy
      }
    },
    // 点击上菜按钮
    eatFood(cus, food) {
      cus.state = 'eating'
      food.state = 'eating'
      food.patience = 100
      if (typeof cus.eatingFood=='undefined'||cus.eatingFood.state !=='eating'){
        cus.eatingFood = food
        this.patienceTimer(food)
      } else {
        let that = this
        // 如果当前在吃食物，则该食物进入等待队列
        setTimeout( function queue() {
          if (typeof cus.eatingFood=='undefined'||cus.eatingFood.state !=='eating'){
            cus.eatingFood = food
            that.patienceTimer(food)
          } else {
            setTimeout(queue,100)
          }
        },100)
      }
      food.cooker.state = 'free'
      food.cooker.timer = food.cooker.waiting()
    },
    // 点击厨师头像加速做菜,这里限定每一位顾客只能加速一次
    speedUpCooking(cook) {
      if (cook.state !== 'working') {
        cook.clickCnt = 0
        return
      }
      cook.clickCnt++
      setTimeout(() => {
        if (cook.clickCnt >= 5) {
          if (cook.speedCus !== cook.cs.id) {
            cook.state = 'speeding'
            cook.speedCus = cook.cs.id
            console.log(cook.cs.id)
            cook.clickCnt = 0
            let t = 7
            this.prompting(['恭喜你加速成功！', 'positive'])
            setTimeout(function speeding() {
              cook.progress += 1
              t--
              if (t > 0) {
                setTimeout(speeding, 100)
              } else {
                cook.state = 'working'
              }
            }, 0)
          } else {
            this.prompting(['同一位顾客只能加速一次！', 'negative'])
          }
        }
        cook.clickCnt = 0
      }, 1000)
    }
  }
}
</script>

<style>
  #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  header {
    width: 95%;
    margin: 0 auto;
    padding: 2%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-item {
    background: linear-gradient(to bottom, #ffe699 50%, #ffd24d 50%);
    line-height: 1.8rem;
    border: 0.3rem solid #8c6900;
    border-radius: 99999px;
    font-size: 1rem;
  }

  header .date {
    text-align: center;
    width: 30%;
  }

  header .money {
    width: 40%;
    text-align: right;
    padding-right: 1rem;
  }

  main .cook-area {
    background-color: #ffd24d;
    margin: 1rem auto;
    min-height: 7.5rem;
    width: 95%;
    border-radius: 0.8rem;
    border: 0.3rem solid white;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
  }

  main .cooker {
    box-sizing: border-box;
    width: 33%;
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 1rem;
  }

  main .cooker .label {
    position: absolute;
    bottom: 0;
    transform: translateY(30%);
    font-size: 0.8rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    border: 0.15rem solid white;
    border-radius: 0.3rem;
    line-height: 1.2rem;
    text-align: center;
    color: white;
  }

  main .cooker .complete-icon {
    position: absolute;
    width: 2.5rem;
    left: 50%;
    bottom: 0.5rem;
    transform: translateX(-100%);
  }


  main .cooker .close {
    position: absolute;
    transform: translate(1.5rem, 0.5rem) rotate(45deg);
    left: 50%;
    top: 0;
    width: 2rem;
    height: 2rem;
    /*background-color: #006dd9;*/
    z-index: 100;
  }

  main .redC {
    width: 0.3rem;
    height: 1.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #cc9979;
  }

  main .redR {
    width: 1.2rem;
    height: 0.3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #cc9979;
  }


  main .customer-area {
    background-color: #ffa64d;
    height: 13.5rem;
    margin: auto;
    width: 95%;
    border-radius: 0.8rem;
    border: 0.3rem solid white;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    padding-bottom: 1.5rem;
  }

  main .customer {
    width: 40%;
    position: relative;
  }

  main .customer .appease-icon, .pay-icon {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-0.5rem, 15%);
    width: 2.5rem;
  }

  main .customer .food-list {
    position: absolute;
    left: 4rem;
    top: 50%;
    transform: translate(0, -50%);
    list-style-type: none;
    width: 70%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 100;
  }

  main .customer .food-list li {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: 0.8rem;
    line-height: 1rem;
    z-index: 100;
  }

  main .customer .food-list li .food-cpd-icon {
    flex-shrink: 0;
    position: relative;
    width: 1rem;
    height: 1rem;
    right: 0;
    border-radius: 50%;
    border: 0.12rem solid white;
  }

  main .customer .food-list li img {
    position: absolute;
    right: 0;
    width: 1.8rem;
    transform: translate(20%, -10%);
  }

  main .customer .food-list li span {
    width: 85%;
    flex-shrink: 0;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    border: 0.12rem solid white;
    border-radius: 0.3rem;
    text-align: center;
    color: white;
  }

  main .waiting-area {
    position: relative;
    width: 95%;
    margin: 0 auto;
  }

  main .waiting-area .wait {
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    right: 0;
    transform: translateY(-50%);
  }

  main .waiting-area .wait .waiter {
    width: 3.5rem;
    transform: translateX(-50%);
  }

  main .waiting-area .wait .waiter .label {
    font-size: 0.8rem;
    transform: translate(-5%, -70%);
    border: 0.15rem solid white;
    border-radius: 0.3rem;
    width: 4rem;
    line-height: 1.2rem;
    text-align: center;
    color: white;
  }


</style>
